<template>
  <div class="shop-item">
    <div>
      <check-button :is-checked="product.checked" @click.native="btnClick"></check-button>
    </div>
    <div class="item-img">
      <img :src="product.image"/>
    </div>
    <div class="item-info">
     <div class="item-title">{{product.title}}</div>
     <div class="item-desc">{{product.desc}}</div>
     <div class="item-bottom">
       <div class="left">¥{{product.price}}</div>
       <div class="right">
         <button @click="btnClick1" class="button1">-</button>
         <span>{{product.count}}</span>
         <button @click="btnClick2" class="button2">+</button>
         </div>
     </div>
    </div>
    <div  class="delGoods"><span @click="delGoods(product.iid)" style="color:white;font-size: 18px;margin-left: 4px;line-height: 22px">X</span></div>
  </div>
</template>

<script>
import CheckButton from 'components/checkButton/CheckButton.vue';

import {MessageBox} from 'mint-ui'

export default {
  components: {
    CheckButton
    },
  name: "CartListItem",
  props: {
    product: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods:{
    delGoods(id){
      MessageBox.confirm('',{
        title:'',
        message:'确定删除该商品吗？',
        confirmButtonText:'确定',
        cancelButtonText:'取消'
      }).then(action => {
        if (action == 'confirm') {
          this.product.checked=false;
          this.$store.state.CartList.forEach((item,index) => {
            if (id === item.iid) this.$store.state.CartList.splice(index,1)
          })

        }
      }).catch(error =>{});
    },
    btnClick1(){
      if(this.product.count<=1){
        this.product.count=1;

      }else{
         this.product.count--;
    }},
    btnClick2(){
      this.product.count++;
    },
    btnClick(){
      this.product.checked=!this.product.checked;
    }
  }
}
</script>

<style scoped>
 .shop-item{
   position: relative;
   display: flex;
   /*justify-content: center;*/
   align-items: center;
   border-bottom: 2px solid #eee;
 }
 .shop-item img{
   width: 100px;
   height: 120px;
   object-fit: cover;
   margin: 8px 8px;
   border-radius: 10px;
 }
 .item-info .item-title{
   color: rgb(58, 54, 54);
   margin: 8px 8px 8px 0;
   font-size:15px;
   /*overflow: hidden;*/
   /*white-space: nowrap;*/
   /*text-overflow: ellipsis;*/
 }
 .item-info .item-desc{
   width: 175px;
   margin: 0px 8px 8px 0;
   font-size:10px ;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 .item-info .delGoods{
   margin-left: 160px;
   font-size: 10px;
 }
 .item-info .left{
   color: rgb(226, 98, 126);
   font-size: 15px;
 }
 .item-info .right{
   font-size: 15px;
   margin-right: 8px;
 }
 .right .button1{
   width: 15px;
   height: 22px;
   margin-right: 2px;
 }
 .right .button2{
   width: 15px;
   height: 22px;
   margin-left: 2px;
 }
 .delGoods{
   position: absolute;
   background-color:rgba(128,128,128,0.5);
   width: 20px;
   height: 20px;
   border-radius: 50%;
   top: 0;
   right: 0;
 }
</style>
